<template>
  <div id="heatmap" class="heatmap"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props:{
    item:String
  },
  watch:{
    item(val){
      this.visItem = val
      dataApi.getData().then((res) => {
      this.items = res.data.items;
      this.initChart()
    });
    }
  },
  data() {
    return {
      chart: null,
      items: [],
      visItem: '森林覆盖率',
    };
  },
  mounted() {
    dataApi.getData().then((res) => {
      this.items = res.data.items;
      this.initChart()
    });
  },
  methods: {
      preData(){
          let res = []
          for (let i = 0; i < this.items.length; i++) {
              res.push([this.items[i]['city'],this.items[i]['年份'],Number(this.items[i][this.visItem])||'-'])
          }
          return res
      },
    getMax(col){
        let max = Number.MIN_VALUE
        for (let i = 0; i < this.items.length; i++) {
            if(Number(this.items[i][col]) > max){
                max = Number(this.items[i][col])
            }
        }
        //console.log('最大  '  + max);
        return max
    },
    getMin(col){
        let min = Number.MAX_VALUE
        for (let i = 0; i < this.items.length; i++) {
           if(Number(this.items[i][col]) < min){
               min = Number(this.items[i][col])
           }
        }
        //console.log('最小 ' + min);
        return min;
    },
    initChart(){
        this.chart = this.$echarts.init(document.getElementById('heatmap'))
        let option = this.setChart()
        this.chart.setOption(option)
        window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      var cities = ["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","浙江",
      "安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","重庆","四川","贵州",
      "云南","西藏","陕西","甘肃","青海","宁夏","新疆",]
      var years= ['2013','2014','2015','2016','2017','2018']

      var data = this.preData();
      

      let option = {
          title: {
            text: this.visItem + '统计',
            subtext: '国家林草局统计年鉴',
            left: 'center'
        },
        tooltip: {
          position: "top",
        },
        animation: false,
        grid: {
          height: "50%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          name: '地区',
           nameTextStyle:{
              fontSize: 16,
          },
          data: cities,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          name: '年',
          data: years,
          nameTextStyle:{
              fontSize: 16,
          },
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: this.getMin(this.visItem),
          max: this.getMax(this.visItem),
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "20%",
          text: ['高','低'],
            inRange: {
              // color: ['#FF6666','#CC6633','#996633','#666633','#336633','#006633','#FFFF33','#CCFF33','#99FF33','#66FF33','#33FF33','#00FF33']
              color: ['orange','yellow','green']
          },
        },
        series: [
          {
            name: this.visItem,
            type: "heatmap",
            data: data,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      return option
    },
    resizeChart(){
        this.chart.resize({width:document.body.clientWidth, height:document.body.clientHeight})
    }
  },
};
</script>

<style>
.heatmap {
  margin-top: 50px;
  width:100%;
  height: calc(80vh);
}
</style>